import { ref, unref, computed, defineComponent, watch, PropType } from "vue";
import { PullRefresh, List as VantList, Empty as VantEmpty, Skeleton, Loading as VantLoading } from "vant";
import type { PullRefreshProps, ListProps } from "vant";
import "./index.scss";
import emptyImg from "@/assets/images/img_nodata.png";

// type aa = pullRefreshProps;
const PullDowmComponent = defineComponent({
  props: {
    // vant PullRefresh属性
    pullObjs: {
      type: Object as PropType<PullRefreshProps>,
      default: () => ({})
    },
    // vant list属性
    loadObjs: {
      type: Object as PropType<ListProps>,
      default: () => ({})
    },
    // 下拉v-model:pull值
    pull: {
      type: Boolean,
      default: false
    },
    // v-model:loading的值
    listLoading: {
      type: Boolean,
      default: false
    },
    // v-model:error的值
    listError: {
      type: Boolean,
      default: false
    },
    // 列表的数量
    listTotal: null,
    // 列表数据
    listData: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:pull", "update:loading", "update:error", "pullRefresh", "pullLoad"],
  setup(props, { emit, slots }) {
    const pullModelData = ref(props.pull);
    const mergeProps = ref({});
    watch(
      () => pullModelData.value,
      newVal => {
        console.log(newVal, "pullModelData变化");
        // pullModelData.value = newVal;
        emit("update:pull", newVal);
      }
    );

    watch(
      () => props.pull,
      newVal => {
        pullModelData.value = newVal;
      },
      {
        deep: true
      }
    );

    // 获取属性的方法
    const getProps = computed(() => {
      const propsObj = { ...props };
      Object.assign(propsObj, unref(mergeProps));
      return propsObj;
    });

    // 提供设置属性的方法
    const setProps = (props = {}) => {
      mergeProps.value = Object.assign(unref(mergeProps), props);
    };

    // 下拉回调
    const pullRefresh = () => {
      emit("pullRefresh", unref(getProps));
    };
    // 上拉回调
    const loadData = () => {
      emit("pullLoad", unref(getProps));
    };

    // 生成下拉列表元素
    const dowmElRender = () => {
      let { loadObjs, listLoading, listError, listTotal, listData } = unref(getProps);
      return listTotal !== 0 ? (
        <VantList
          v-model:loading={listLoading}
          v-model:error={listError}
          finished-text="没有更多了"
          {...loadObjs}
          onLoad={() => loadData()}
        >
          {{
            default: () => slots.default!(),
            loading: () =>
              listData.length <= 0 ? (
                ""
              ) : (
                <p>
                  <VantLoading size={20} class="pulldowm_load_icon" />
                  加载更多
                </p>
              ),
            error: () => <p onClick={loadData}>请求失败，点击重新加载</p>
          }}
        </VantList>
      ) : (
        listEmptyRender()
      );
    };

    // 列表为空时渲染元素
    const listEmptyRender = () => {
      return <VantEmpty image={emptyImg} description="列表为空" />;
    };
    return () => (
      <PullRefresh v-model={pullModelData.value} {...props.pullObjs} onRefresh={() => pullRefresh()} class="pullDowm_box">
        {{
          default: () => {
            return (
              <>
                {<div class="pullDowmHwader">{slots.header && slots.header!()}</div>}
                {props.listData.length <= 0 && props.listTotal === null && props.listError === false && (
                  <div class="pulldowm_loadmore">
                    {/* <Skeleton title={true} row={3} class="pulldowm_skeleton" />
                  <Skeleton title={true} row={3} class="pulldowm_skeleton" />
                  <Skeleton title={true} row={3} class="pulldowm_skeleton" />
                  <Skeleton title={true} row={3} class="pulldowm_skeleton" /> */}
                    <VantLoading size={20} class="pulldowm_load_icon" />
                    加载更多
                  </div>
                )}
                {dowmElRender()}
              </>
            );
          }
        }}
      </PullRefresh>
    );
  }
});

export default PullDowmComponent;
